<template>
  <div>
    <el-form :model="detailForm" ref="detailForm" class="detailForm">
      <table
        border="1"
        cellpadding
        style="width: 100%"
        cellpadding="0"
        cellspacing="0"
      >
        <thead>
        <tr style="height: 44px">
          <th :colspan="2" style="width: 200px">项目</th>
          <th>限度</th>
          <th v-for="(item, index) in indexList" :key="index">
            {{ item }}
          </th>
        </tr>
        </thead>
        <tbody>
        <tr v-for="(val, ind) in detailForm.table_info" :key="ind" style="height: 44px">
          <td v-if="val.boo" align="center" :colspan="val.col" :rowspan="val.row" style="width: 50px">
            {{ val.parent_name }}
          </td>
          <td v-if="val.col === 1" align="center" :colspan="val.col" style="width: 150px">
            <el-form-item>
              <span>{{val.children_name}}</span>
            </el-form-item>
          </td>
          <td align="center">
            <el-form-item :prop="'table_info.' + ind + '.limit_value'">
              <span>{{val.limit_value}}</span>
            </el-form-item>
          </td>
          <template v-for="(tab, tind) in indexList">
            <td align="center" :key="tind">
              <el-form-item v-if="val.point_info && val.point_info[tab]">
                <span>{{val.point_info[tab].value}}</span>
              </el-form-item>
            </td>
          </template>
        </tr>
        </tbody>
      </table>
    </el-form>
  </div>
</template>

<script>
  export default {
    name: 'tableDetails',
    props: {
      detailForm: {
        type: Object,
        default() {
          return {
            point_table: [],
            table_info: []
          }
        }
      },
      point: {
        type: Object,
        default() {
          return {}
        }
      }
    },
    data() {
      return {
        indexList: []
      }
    },
    //是计算属性，也可以理解为一个方法。
    computed: {},

    //属性是手动定义的所需监听的值
    watch: {},

    //生命周期 - 创建完成（访问当前this实例）
    created() {
    },

    //生命周期 - 挂载完成（访问DOM元素）
    mounted() {
      setTimeout(()=>{
        let a = this.point.sample_point_num
        let b = this.point.sample_point_unit
        let c
        if (b === 1) {
          c = a + '天'
        } else {
          c = a + '月'
        }
        let index = this.detailForm.point_table.findIndex(p => p === c)
        if (index !== -1) {
          for (let i = 0; i < this.detailForm.point_table.length; i++) {
            if (i <= index) {
              this.indexList.push(this.detailForm.point_table[i])
            }
          }
        }
      },300)
    },

    //是Vue实例对象上绑定的方法，供当前Vue组件作用域内使用，
    methods: {

    }

  }

</script>

<style scoped>
  /* @import url(); 引入css类 */
  .detailForm ::v-deep .el-form-item {
    margin-bottom: 0 !important;
  }
</style>
